<template>
	<div class="text-report" v-html="report"></div>
</template>
<script setup>
import getReport from '@/common/getReport';
const { dataPool } = defineProps(['dataPool']);
const report = getReport(dataPool);
</script>
<style>
.text-report {
	padding: 0 6% 20px;
	overflow: auto;
	height: 100%;
}
.text-report h1 {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}
.text-report h2 {
	font-size: 1.2rem;
	font-weight: bold;
}
.text-report p {
	font-size: 1rem;
}
.text-report p.first-line {
	text-indent: 2rem;
}

.text-report .keyword {
	background-color: yellow;
}

.warn .keyword {
	font-weight: bold;
}

.text-report .warn {
	color: red;
	font-weight: bold;
}
</style>
